

import { useCallback, useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Input } from 'antd';
import { SyncOutlined, LoadingOutlined, ReloadOutlined } from '@ant-design/icons'

import GroupSearchItem from '../groupSearchItem';
import GroupJoin from '../groupJoin';

import {
    search_wrapper,
    search_title,
    search_content,
    search_content_title,
    search_content_title_txt,
    search_content_title_refresh_btn,
    search_content_result,
    search_content_result_tip,
    search_content_result_tip_txt,
} from './index.module.css'
import { getPublicGroupInfo, getSearchGroup } from '../../assets/js/api';
import { RTrim } from '../../assets/js/tools';

function GroupSearch(props) {

    const { user } = props;

    const [showPublic, setShowPublic] = useState(true);
    const [searchKeyword, setSearchKeyword] = useState('');
    const [searchedKeyword, setSearchedKeyword] = useState(''); // 用于子item高亮显示搜索关键字
    const [loading, setLoading] = useState(false);
    const [retry, setRetry] = useState({need: false, kw: ''});
    
    const [publicGroup, setPublicGroup] = useState([]);
    const [searchGroup, setSearchGroup] = useState([]);

    const getPublicGroup = useCallback(() => {
        // 获取部分公开群组推荐
        if (loading) return;
        setLoading(true);

        getPublicGroupInfo({user_id: user.id})
        .then(res => {
            const {code, data} = res.data;
            if (code !== 1) {
                console.log(res.data)
                return;
            }
            setPublicGroup(data);
        })
        .finally(() => {
            setLoading(false);
        });
    }, [loading, user.id]);

    useEffect(() => {
        // 不将getPublicGroup放入依赖项,因为getPublicGroup依赖loading,当loading改变会时getPublicGroup改变,时getPublicGroup再次调用,造成循环
        getPublicGroup();
    }, []);


    
    function searchKeywordGroup(value) {
        // 搜索关键字群组
        const finalValue = RTrim(value);
        if (!finalValue) return;
        if (showPublic) setShowPublic(false);   // 不再显示推荐群组

        setLoading(true);

        getSearchGroup({kw: finalValue})
        .then(res => {
            const {code, data} = res.data;
            if (code !== 1) {
                // 显示重试
                setSearchGroup([]);
                setRetry({need: true, kw:finalValue});
                return;
            }
            setSearchGroup(data);
            setRetry({need: false, kw:''});
            setSearchedKeyword(finalValue)
        })
        .catch(err => {
            console.log(err);
            setRetry({need: true, kw:finalValue});
        })
        .finally(() => {
            setLoading(false);
        });
    }

    return (
        <>
            <div className={search_wrapper}>
                <div className={search_title}>搜索群组</div>
                <Input.Search 
                    enterButton={true} 
                    value={searchKeyword} 
                    onChange={v => setSearchKeyword(v.target.value)}
                    onSearch={searchKeywordGroup} 
                />
                <div className={search_content}>
                    <div className={search_content_title}>
                        <span className={search_content_title_txt}>{showPublic ? '推荐群' : `搜索：${RTrim(searchKeyword)}`}</span>
                        {
                            showPublic ? <span className={search_content_title_refresh_btn} onClick={getPublicGroup}>刷新 <SyncOutlined /></span> : ''
                        }
                    </div>
                    <div className={search_content_result}>
                        {
                            loading ? 
                                <div className={search_content_result_tip} style={{fontSize: '40px'}}><LoadingOutlined /></div> :
                                showPublic ? 
                                    publicGroup.length < 1 ? <span className={search_content_result_tip}>暂无推荐</span> :
                                        publicGroup.map(item => <GroupSearchItem key={item.group_id} data={item}/>) :
                                        retry.need ? 
                                            <div className={search_content_result_tip} style={{cursor: 'pointer'}} onClick={() => searchKeywordGroup(retry.kw)}>
                                                <ReloadOutlined style={{fontSize: '40px'}} />
                                                <span className={search_content_result_tip_txt}>网络出错,点击重试</span>
                                            </div> :
                                            searchGroup.length < 1 ? 
                                                <span className={search_content_result_tip}>未找到结果,搜点别的试试吧</span> :
                                                searchGroup.map(item => <GroupSearchItem key={item.group_id} highLight={RTrim(searchedKeyword)} data={item} />)
                        }
                    </div>
                </div>
            </div>
            <GroupJoin />
        </>
    )
}



function mapStateToProps(state) {
    return {
        user: state.user
    }
}
export default connect(
    mapStateToProps,
    {

    }
)(GroupSearch);

